<style>
    .calendar_hand {
        cursor: pointer;
    }
    #calendarTpl .calendar_row {
        float: left;
        width: 100%;
        clear: both
    }
    #calendarTpl .calendar_body {
        float: left;
        width: 100% !important;
        position: relative;
    }
    #calendarTpl .calendar_header {
        background: #8ab503;
        color: #fff;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 14px
    }
    #cal_authorize {position: relative;top: 2px;}
    #cal_timeout_message{width: 90%;line-height: 20px;font-size: 16px;text-align: center;top: 50%;position: relative;}
</style>
<div id="calendarTpl">
    <div class="calendar_row">
        <!-- header -->
        <div class="calendar_header">
            Google Calendar
            <i class="main_common_f_13_13 calendar_panel_resize right wp_mt_3 wp_mr_5 calendar_hand" title="Expand"></i>
        </div>
    </div>
    <!-- body -->
    <div class="calendar_row" id="calendar_entity">
        <div class="top" style="display: none; height: 100%;overflow:hidden;text-align: center;position: relative;" id="cal_login_div">
            <img src="imgs/drive_signin.png"/>
            <button type="button" class="k-button" id="cal_authorize"> Sign in </button>
        </div>
        <div class="calendar_body" id="calendar_body" style="background-color: #ffffff">
        </div>
    </div>
</div>
<script>
    var calendar = (function () {
        var pageTpl = $('#calendarTpl'),
                bodyTpl = $('#calendar_body'),
                entyTpl = $('#calendar_entity'),
                _height = Workport.utils.getViewPort().height-80,
                _min = true,   // if is min window
                calLoader,
                _itemUrl = 'https://mail.cognizant.com',
                win = '',
                dateStr='',
                innerHtml = '<img src="imgs/Inbox small.png" alt="">' +
                        '<button id="login_button" type="button" class="k-button">Login</button>',
                _loginHeight = -(Workport.utils.getViewPort().height / 2 + 300);
//        var iframeMin = '<iframe id="minCal" src="https://www.google.com/calendar/embed?showTitle=0&amp;showPrint=0&amp;mode=AGENDA&amp;hl=en&amp;src=workportui%40gmail.com&ctz=America/New_York" style="border: 0" width="256" height="'+ _height +'" frameborder="0" scrolling="no"></iframe>';
        var iframeMin = '<iframe id="minCal" src="https://www.google.com/calendar/embed?showTitle=0&amp;showTabs=0&amp;showPrint=0&amp;hl=en&amp;src=workportui%40gmail.com&mode=day&ctz=America/New_York&showNav=0&showPrint=0&showCalendars=0" style="border: 0" width="256" height="'+ _height +'" frameborder="0" scrolling="no"></iframe>';
        return{
            init: function () {
                bodyTpl.off('*'),
                bodyTpl.empty();
                bodyTpl.height(_height+10);
                $('#calendar').html(pageTpl);
                var day = new Date();
                $("#cal_login_div img").attr('src','imgs/google calendar/'+day.getDate()+'.png');
                var date = calendar.getDateFormat();
                dateStr = '&dates='+date+"/"+date;
                calLoader = new Workport.Loader($('#calendar'),{ text:'Loading', position:'center',imgColor:'black', textCSS:{'color':'black'} });
            },
            initial: function(){
                if(typeof(gapi) == 'undefined'){
                    calendar.timeoutMessage();
                    return;
                }
                Workport.Google.checkAuth(function (result) {
                    if (!result.error) {
                        $("#cal_login_div").remove();
                        calLoader.show();
                        if(WP_MAIL_TYPE == 'Gmail'&& $.trim(WP_WORK_MAIL)!=''){
//                            iframeMin = '<iframe id="minCal" src="https://www.google.com/calendar/embed?showTitle=0&amp;showTabs=0&amp;showPrint=0&amp;hl=en&amp;src='+$.trim(WP_WORK_MAIL)+'&amp;color=%23182C57&amp;src=zh-cn.indian%23holiday%40group.v.calendar.google.com&amp;color=%23125A12&amp;ctz=Asia/Delhi&mode=day'+dateStr+'&showNav=0&showCalendars=0" style="border: 0" width="256" height="'+ _height +'" frameborder="0" scrolling="no"></iframe>';
//                            WP_WORK_MAIL = 'workportui@gmail.com';
                            iframeMin = '<iframe id="minCal" src="https://www.google.com/calendar/embed?showTz=0&showTitle=0&showTabs=0&showPrint=0&hl=en&color=%23182C57&mode=agenda&showNav=0&showCalendars=0'+dateStr+'&src='+$.trim(WP_WORK_MAIL)+'&ctz=Asia/Delhi" style="border: 0" width="256" height="'+ _height +'" frameborder="0" scrolling="no"></iframe>'; //removed holiday and timezone
                        }else{
                            alert("Get Gmail error");
                        }
                        $(".calendar_body").html(iframeMin);
                        setTimeout(function(){
                            calLoader.hide();
                        },60000);
                        document.getElementById('minCal').onload = function() {
                            calLoader.hide();
                        };
                        $("#calendar_body").css("overflow-y", "none");
                        //scroll in homepage
                        HomePage_Scrollable.registerZoomCallback(WPMoudleManager.getModule('calendar').index, calendar.switchMax, calendar.switchMin);
                        $('.calendar_panel_resize').on({
                            click: function (e) {
                                if (_min) {
                                    calendar.switchMax();
                                } else {
                                    HomePage_Scrollable.zoom(WPMoudleManager.getModule('calendar').index);
                                    _min = true;
                                }
                            }
                        });
                    }else{
                        $('#cal_login_div').css('display','block');
                        calLoader.hide();
                    }
                });
                $('#cal_authorize').click(function(e){
                    Workport.Google.authorize(false, function(result){
                        if(!result || !result.error){
                            $("#cal_login_div").remove();
                            calLoader.show();
                            if(WP_MAIL_TYPE == 'Gmail'&& $.trim(WP_WORK_MAIL)!=''){
//                                iframeMin = '<iframe id="minCal" src="https://www.google.com/calendar/embed?showTitle=0&amp;showTabs=0&amp;showPrint=0&amp;hl=en&amp;src='+$.trim(WP_WORK_MAIL)+'&amp;color=%23182C57&amp;src=zh-cn.indian%23holiday%40group.v.calendar.google.com&amp;color=%23125A12&amp;ctz=Asia/Delhi&mode=day'+dateStr+'&showNav=0&showCalendars=0" style="border: 0" width="256" height="'+ _height +'" frameborder="0" scrolling="no"></iframe>';
//                                WP_WORK_MAIL = 'workportui@gmail.com';
                                iframeMin = '<iframe id="minCal" src="https://www.google.com/calendar/embed?showTz=0&showTitle=0&showTabs=0&showPrint=0&hl=en&color=%23182C57&mode=agenda&showNav=0&showCalendars=0'+dateStr+'&src='+$.trim(WP_WORK_MAIL)+'&ctz=Asia/Delhi" style="border: 0" width="256" height="'+ _height +'" frameborder="0" scrolling="no"></iframe>'; //removed holiday and timezone
                            }else{
                                alert("Get Gmail error");
                            }
                            $(".calendar_body").html(iframeMin);
                            setTimeout(function(){
                                calLoader.hide();
                            },60000);
                            document.getElementById('minCal').onload = function() {
                                calLoader.hide();
                            };
                            $("#calendar_body").css("overflow-y", "none");
                            //scroll in homepage
                            HomePage_Scrollable.registerZoomCallback(WPMoudleManager.getModule('calendar').index, calendar.switchMax, calendar.switchMin);
                            $('.calendar_panel_resize').on({
                                click: function (e) {
                                    if (_min) {
                                        calendar.switchMax();
                                    } else {
                                        HomePage_Scrollable.zoom(WPMoudleManager.getModule('calendar').index);
                                        _min = true;
                                    }
                                }
                            });
                        }else{
                            $('#cal_login_div').css('display','block');
                            calLoader.hide();
                        }
                    });
                });
            },

            switchMin: function () {
                calLoader.show();
                $(".calendar_panel_resize").toggleClass("main_common_f_13_13 main_common_m_13_13");
                $(".calendar_panel_resize").attr("title",'Expand');
                _min = true,
                bodyTpl.off('*'),
                bodyTpl.empty();
                bodyTpl.height(_height);
//                $(".calendar_body").html(innerHtml);
                $(".calendar_body").html(iframeMin);
                $("#calendar_body").css("overflow-y", "none");
                setTimeout(function(){
                    calLoader.hide();
                },1000);
            },
            switchMax: function () {
                if (_min) {
                    _min = false;
                    calLoader.show();
                    $(".calendar_panel_resize").toggleClass("main_common_f_13_13 main_common_m_13_13");
                    $(".calendar_panel_resize").attr("title",'Collapse');
                    Workport.Communication.sendReport('GCalendar');
                    HomePage_Scrollable.zoom(WPMoudleManager.getModule('calendar').index);
                    var iframe;
                    if(WP_MAIL_TYPE == 'Gmail'){
//                        iframe = '<iframe id="maxCal" src="https://www.google.com/calendar/embed?showTitle=0&amp;mode=DAY&amp;hl=en'+dateStr+'&amp;src='+$.trim(WP_WORK_MAIL)+'&amp;src=zh-cn.indian%23holiday%40group.v.calendar.google.com&amp;ctz=Asia/Delhi&amp;color=%23125A12" style="border: 0" width="768" height="'+_height+'" frameborder="0" scrolling="no"></iframe>';
                        iframe = '<iframe id="maxCal" src="https://www.google.com/calendar/embed?showTz=0&amp;showTitle=0&amp;mode=DAY&amp;hl=en'+dateStr+'&amp;src='+$.trim(WP_WORK_MAIL)+'&amp;ctz=Asia/Delhi&amp;color=%23125A12" style="border: 0" width="768" height="'+_height+'" frameborder="0" scrolling="no"></iframe>';  //removed holiday and timezone
                    }
                    $(".calendar_body").html(iframe);
                    $("#calendar_body").css("overflow-y", "none");
                    document.getElementById('maxCal').onload = function() {
                        calLoader.hide();
                    };
                }
            },
            getDateFormat: function () {
                var day = new Date();
                var Year = 0;
                var Month = 0;
                var Day = 0;
                var CurrentDate = "";
                Year= day.getFullYear();
                Month= day.getMonth()+1;
                Day = day.getDate();
                CurrentDate += Year;
                if (Month >= 10 ){
                    CurrentDate += Month;
                }
                else{
                    CurrentDate += "0" + Month;
                }
                if (Day >= 10 ){
                    CurrentDate += Day ;
                }
                else{
                    CurrentDate += "0" + Day ;
                }
                return CurrentDate;
            },
            getTimeByLocalTimeZone: function (date) {
                var originalDate = new Date(date);
                var localOffset = originalDate.getTimezoneOffset() * 60000;
                var localDate = originalDate.getTime() - localOffset;
                return kendo.toString(new Date(localDate), 'G');
            },
            timeoutMessage:function(){
                bodyTpl.empty();
                $('#calendar_entity').append('<div id="cal_timeout_message" class="center">'+WP_TIMEOUT_MESSAGE+'</div>');
                calLoader.hide();
            }
        }
    })();
//    if(calendarShow){
        calendar.init();
        calendar.initial();
//    }
</script>